<template>
  <div>
    <p ref="p">数字 ： {{ count }}</p>
    <button @click="handleClick">点击+1</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      count: 100
    }
  },
  methods:{
    // Vue是异步更新DOM元素的， ==> Vue不会在数据修改后，立刻更新页面上的dom元素

    // 如果修改了数据，我就更新一次dom元素 ===> 性能消耗很大
    // 假设每次+1，都更新一次dom，dom元素要修改五次 ==> 内部，每执行一次count++就会对比新旧虚拟dom 

    // 所以，不能数据一变化就更新DOM元素（渲染页面内容） ==> 实际情况是先攒着~~，最后一次性的批量更新

    // 点击的时候，count+1， 并且获取p标签的内容
    handleClick(){
      // 点击的时候让 count + 1 
      this.count++ 
      this.count++ 
      this.count++ 
      this.count++ 
      this.count++ 

      // 等一秒看一下，是否更新了dom元素
      setTimeout(() => {
        console.log(this.$refs.p.innerHTML)
      }, 0)

      // 用微任务来获取异步更新后的dom元素
      const p = new Promise((resolve, reject) => {
        console.log('promise')
        resolve()  // 更新状态到完成态
      })

      p.then(() => {
        console.log(this.$refs.p.innerHTML)
      })

      // this.$nextTick(回调函数)
      // 回调函数 ==> 当dom元素更新后，就会立刻执行 
      this.$nextTick(() => {
        console.log(this.$refs.p.innerHTML)
      })

      // promise ==> mutationObserver => setImmediate => setTimeout 

      
    }

    // 复习宏微任务： 
    // 宏任务：
    // 1. script代码块
    // 2. setTimeout 
    // 3. setInterval
    // 4. setImmediate

    // 微任务：
    // 1. promise.then()  / .catch() 的回调
    // 2. async await  await下面那一行放到微任务队列
    // 3. mutationObserver 
    // 4. process.nextTick （node)


    // Vue修改数据后，不会立即更新dom元素，而是先攒着，最后一起批量更新
    // $nextTick 作用 ==> 获取异步更新后的DOM元素

    // vue/src/core/util/next-tick.ts  
    // promsie ==> MutationObserver ==> setImmediate ==> setTimeout 

    // $nextTick内部做了一个宏微任务的优雅降级 



    // 当问你Event loop 的时候，事件循环的执行机制的时候 ==> 顺便把这个答一下~~ 

    // ===> 面试的时候
    // $nextTick你用过吗？它是干嘛的？实现原理？
    // 当我们修改了data中的数据后，dom元素并不是立刻更新的，Vue是异步更新dom元素的（性能原因）
    // 如果我们想要获取异步更新后的dom元素，就可以使用$nextTick。

    // 实现原理？ 
    // 这个我熟悉，它的源码src/core/util/next-tick.ts也就100来行~~它内部做了一个宏微任务的优雅降级
    // 它首先判断支不支持 promise , 如果不支持，再判断是否支持 mutationObserver,
    // 如果还是不支持，继续判断，setImmediate支不支持，最后setTimeout兜底

    // ==> 注意： 有些词语  适度一下，不要太夸大了~~ 吹过了就膨胀了 要谦逊一点~~ 
  }
}
</script>

<style>

</style>